<template>
  <view class="scene-area" :style="{ backgroundImage: getSceneBackground() }">
    <!-- 场景覆盖层 -->
    <view class="scene-overlay"></view>
      
    <!-- 场景描述和动作 -->
    <view class="scene-info">
      <view class="location-header">
        <text class="location-name">{{ gameState.currentLocation }}</text>
        <text class="location-icon">{{ getLocationIcon() }}</text>
      </view>
      <text class="location-description">{{ getLocationDescription() }}</text>
      
      <!-- 可执行动作 -->
      <view class="action-buttons">
        <button 
          v-for="action in getAvailableActions()" 
          :key="action.id"
          class="action-btn"
          :class="action.class"
          @click="performAction(action)"
          :disabled="!canPerformAction(action)"
        >
          <text class="action-icon">{{ action.icon }}</text>
          <text class="action-text">{{ action.name }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GameSceneArea',
  props: {
    gameState: {
      type: Object,
      required: true
    },
    mapTiles: {
      type: Array,
      required: true
    },
    availableActions: {
      type: Array,
      required: true
    }
  },
  methods: {
    getSceneBackground() {
      const backgrounds = {
        'beach': 'url("https://picsum.photos/id/1018/1920/1080")',
        'forest': 'url("https://picsum.photos/id/1015/1920/1080")',
        'cave': 'url("https://picsum.photos/id/1016/1920/1080")',
        'river': 'url("https://picsum.photos/id/1019/1920/1080")',
        'mountain': 'url("https://picsum.photos/id/1020/1920/1080")',
        'ruins': 'url("https://picsum.photos/id/1021/1920/1080")',
        'volcano': 'url("https://picsum.photos/id/1022/1920/1080")',
        'lake': 'url("https://picsum.photos/id/1023/1920/1080")',
        'desert': 'url("https://picsum.photos/id/1024/1920/1080")',
        'swamp': 'url("https://picsum.photos/id/1025/1920/1080")',
        'cliff': 'url("https://picsum.photos/id/1026/1920/1080")',
        'meadow': 'url("https://picsum.photos/id/1027/1920/1080")',
        'island': 'url("https://picsum.photos/id/1028/1920/1080")',
        'glacier': 'url("https://picsum.photos/id/1029/1920/1080")',
        'oasis': 'url("https://picsum.photos/id/1030/1920/1080")'
      }
      return backgrounds[this.gameState.currentLocationId] || backgrounds['beach']
    },
    
    getLocationIcon() {
      const tile = this.mapTiles.find(t => t.id === this.gameState.currentLocationId)
      return tile ? tile.icon : '🏝️'
    },
    
    getLocationDescription() {
      const tile = this.mapTiles.find(t => t.id === this.gameState.currentLocationId)
      return tile ? tile.description : '未知区域'
    },
    
    getAvailableActions() {
      const tile = this.mapTiles.find(t => t.id === this.gameState.currentLocationId)
      if (!tile) return []
      
      return tile.actions.map(actionId => {
        const action = this.availableActions.find(a => a.action === actionId)
        if (!action) return null
        
        return {
          id: action.id,
          name: action.name,
          icon: action.icon,
          action: action.action,
          class: this.getActionClass(actionId)
        }
      }).filter(Boolean)
    },
    
    getActionClass(actionId) {
      const classes = {
        'gatherWood': 'wood-action',
        'gatherStone': 'stone-action',
        'findFood': 'food-action',
        'findWater': 'water-action',
        'rest': 'rest-action'
      }
      return classes[actionId] || 'default-action'
    },
    
    canPerformAction(action) {
      const energyCosts = {
        'gatherWood': 10,
        'gatherStone': 15,
        'findFood': 20,
        'findWater': 15,
        'rest': 0
      }
      return this.gameState.energy >= (energyCosts[action.action] || 0)
    },
    
    performAction(action) {
      this.$emit('perform-action', action)
    }
  }
}
</script>

<style scoped>
/* 场景区域 */
.scene-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 300rpx); /* 计算高度，减去头部和底部TabBar的高度 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 简单的渐变背景 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.scene-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1rpx);
}

.scene-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
  z-index: 20;
  border-radius: 16rpx 16rpx 0 0;
}

.location-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.location-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #fcd34d;
}

.location-icon {
  font-size: 40rpx;
}

.location-description {
  color: #d1d5db;
  font-size: 24rpx;
  line-height: 1.5;
  margin-bottom: 24rpx;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 24rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  border-radius: 16rpx;
  border: none;
  font-size: 22rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  min-width: 120rpx;
  justify-content: center;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn:disabled {
  opacity: 0.5;
  transform: none;
}

.wood-action {
  background: rgba(139, 90, 43, 0.9);
  color: white;
}

.stone-action {
  background: rgba(107, 114, 128, 0.9);
  color: white;
}

.food-action {
  background: rgba(245, 158, 11, 0.9);
  color: white;
}

.water-action {
  background: rgba(29, 78, 216, 0.9);
  color: white;
}

.rest-action {
  background: rgba(5, 150, 105, 0.9);
  color: white;
}

.default-action {
  background: rgba(55, 65, 81, 0.9);
  color: white;
}

.action-icon {
  font-size: 20rpx;
}

.action-text {
  font-size: 20rpx;
}
</style>
